@import '../../../component/title/title.scss';

.mingshi{
    padding: 77px 0 57px 0;
    background: url('../../../img/index-mingshi-bg.png') center center;
    li{
        width: 220px;
        height: 280px;
        float: left;
        text-align: center;
        background-color: rgba(255,255,255,0.7);
        border-radius: 8px;
        transition: 0.3s;
        &:not(:last-of-type){
            margin-right: 25px;
        }
        &:hover{
            background-color: rgba(255,255,255,0.9);
            transform: scale(1.3);
            // img{
            //     transform: translateY(-20px) scale(0.7);
            // }
            // p:nth-of-type(1){
            //     transform: translateY(-30px);
            // }
            // p:nth-of-type(2){
            //     opacity: 0;
            //     max-height: 0;
            // }
            p:nth-of-type(3) {
                // transform: translateY(-40px);
                height: 154px;
            }
        }
        img{
            border-radius: 50%;
            width: 100px;
            height: 100px;
            // transform: translateY(-20px);
            // transform-origin: center top;
            transition: 0.3s;
        }
        p{
            // overflow: hidden;
            transition: 0.3s;
        }
        p:nth-of-type(1){
            margin-top: -10px;
            margin-bottom: 10px;
            font-weight: bold;
            font-size: 18px;
            color: $l-word;
        }
        
        p:nth-of-type(2){
            max-height: 20px;
            color: $l-word;
        }
        p:nth-of-type(3){
            // transform: translateY(0px);
            margin-top: 20px;
            padding: 0 34px;
            line-height: 1.6;
            color: $m-word;
            font-size: 12px;
            text-align: left;
            // height: 112px;
            // overflow: hidden;
        }
    }
}